<template>
	<view>
		<view class="alldiv">
			<!-- 头部搜索地图区域 -->
			<view class="headdiv">
				<view class="mapdiv">
					<mypicker class="mypickerdiv" :candidates="peopleList" :isJSON="true" keyName="name"
						:placeholder="internationalization.home.mypick" v-model="regiPerson" @input="personInput"
						@select="personSelect"></mypicker>
					<u-search v-model="searchval" :placeholder="internationalization.home.searchval" @click="Mysearch"
						disabled :showAction="false"></u-search>
				</view>
				<!--        <map-->
				<!--          style="width: 100%; height: 300px"-->
				<!--          :latitude="latitude"-->
				<!--          :longitude="longitude"-->
				<!--          :markers="covers"-->
				<!--        >-->
				<!--        </map>-->
				<!-- 方法一：点击小程序map地图插件跳转到app中打开 -->
			</view>
			<!-- 主体区域 -->
			<view class="bodydiv">
				<!-- 按钮区域 -->
				<view class="buttondiv">
					<van-button type="primary" @click="MyScan" style="width: 305px" round
						size="large">{{ internationalization.home.code }}
						<br>


						<span style="font-family: 'TIME NEW ROMAN'">
							Scan the QR code to use the car
						</span>
					</van-button>



				</view>
				<!-- 功能区域 -->
				<view class="functiondiv">
					<view class="fundiv" @click="getFreeRide">
						<image style="width: 36px; height: 36px" src="@/static/icon/iconify-fa-solid_car-alt@3x.png"
							mode="scaleToFill" />
						<text style="margin-left: 10px">{{
              internationalization.home.susc
            }}</text>
					</view>
					<view class="fundiv" @click="goTakingataxi">
						<image style="width: 36px; height: 36px" src="@/static/icon/iconify-bxs_taxi@3x.png"
							mode="scaleToFill" />
						<text style="margin-left: 10px">{{
              internationalization.home.dicou
            }}</text>
					</view>
				</view>
				<!-- 订单区域 -->
				<view class="goodsdiv">
					<van-cell :title="internationalization.home.ord" :value="internationalization.home.wh" is-link
						@click="MYobj" />
					<!-- 订单列表 -->
					<view class="gddiv">
						<view class="orderTop">
							<view class="pic">
								<u-avatar src="@/static/text/goos1.png"></u-avatar>
							</view>
							<view class="carInfo">
								<view class="text">粤A123456</view>
								白色广汽新能源
							</view>
							<view class="phone">
								<image style="width: 36px; height: 36px" src="@/static/phone.png" mode="scaleToFill" />
							</view>
						</view>
						<view class="middle">
							<u-line-progress class="mibProgress" :percentage="30" :showText="false"></u-line-progress>
							<view class="endTag">起</view>
							<view class="endFlagTip">乘客所在地具体地址地...</view>
							<view class="arrow"></view>
						</view>
						<view class="driverInfo">
							司机距离您<em>600m</em>
							预计<em>1min</em>到达
						</view>
					</view>
				</view>
				<!-- 推荐换电站 -->
				<view class="recommenddiv">
					<!-- 菜单结构 -->
					<view class="recommdiv">
						<van-cell :title="internationalization.home.TJ" @click="MyExchangestation"
							:value="internationalization.home.al" is-link />
					</view>
					<!-- 推荐换电站列表 -->
					<view class="recommlistdiv">
						<view class="rediv">
							<view class="r">
								<view>PSO换电站</view>
								<u-badge type="warning" max="99" :value="mg"></u-badge>
							</view>
							<view class="retitlediv">
								<view class="spandiv">
									<span>PSO换电站 可租售 可贷款购买 可分期购买</span>
								</view>
							</view>
							<view class="button2div">
								<view class="nn">
									<span style="font-size: 20px; font-weight: bold; color: red">￥68
									</span>
									<span style="
                      text-decoration: line-through;
                      margin-left: 10px;
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">￥128</span>
								</view>
								<view class="nn1">
									<span style="
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">500m</span>
								</view>
							</view>
						</view>
						<view class="rediv">
							<view class="r">
								<view>PSO换电站</view>
								<u-badge type="warning" max="99" :value="mg"></u-badge>
							</view>
							<view class="retitlediv">
								<view class="spandiv">
									<span>PSO换电站 可租售 可贷款购买 可分期购买</span>
								</view>
							</view>
							<view class="button2div">
								<view class="nn">
									<span style="font-size: 20px; font-weight: bold; color: red">￥68
									</span>
									<span style="
                      text-decoration: line-through;
                      margin-left: 10px;
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">￥128</span>
								</view>
								<view class="nn1">
									<span style="
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">500m</span>
								</view>
							</view>
						</view>
						<view class="rediv">
							<view class="r">
								<view>PSO换电站</view>
								<u-badge type="warning" max="99" :value="mg"></u-badge>
							</view>
							<view class="retitlediv">
								<view class="spandiv">
									<span>PSO换电站 可租售 可贷款购买 可分期购买</span>
								</view>
							</view>
							<view class="button2div">
								<view class="nn">
									<span style="font-size: 20px; font-weight: bold; color: red">￥68
									</span>
									<span style="
                      text-decoration: line-through;
                      margin-left: 10px;
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">￥128</span>
								</view>
								<view class="nn1">
									<span style="
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">500m</span>
								</view>
							</view>
						</view>
						<view class="rediv">
							<view class="r">
								<view>PSO换电站</view>
								<u-badge type="warning" max="99" :value="mg"></u-badge>
							</view>
							<view class="retitlediv">
								<view class="spandiv">
									<span>PSO换电站 可租售 可贷款购买 可分期购买</span>
								</view>
							</view>
							<view class="button2div">
								<view class="nn">
									<span style="font-size: 20px; font-weight: bold; color: red">￥68
									</span>
									<span style="
                      text-decoration: line-through;
                      margin-left: 10px;
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">￥128</span>
								</view>
								<view class="nn1">
									<span style="
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">500m</span>
								</view>
							</view>
						</view>
						<view class="rediv">
							<view class="r">
								<view>PSO换电站</view>
								<u-badge type="warning" max="99" :value="mg"></u-badge>
							</view>
							<view class="retitlediv">
								<view class="spandiv">
									<span>PSO换电站 可租售 可贷款购买 可分期购买</span>
								</view>
							</view>
							<view class="button2div">
								<view class="nn">
									<span style="font-size: 20px; font-weight: bold; color: red">￥68
									</span>
									<span style="
                      text-decoration: line-through;
                      margin-left: 10px;
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">￥128</span>
								</view>
								<view class="nn1">
									<span style="
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">500m</span>
								</view>
							</view>
						</view>
						<view class="rediv">
							<view class="r">
								<view>PSO换电站</view>
								<u-badge type="warning" max="99" :value="mg"></u-badge>
							</view>
							<view class="retitlediv">
								<view class="spandiv">
									<div>PSO换电站 可租售 可贷款购买 可分期购买 </div>
									<div>PSO换电站 可租售 可贷款购买 可分期购买 </div>
								</view>
							</view>
							<view class="button2div">
								<view class="nn">
									<span style="font-size: 20px; font-weight: bold; color: red">￥68
									</span>
									<span style="
                      text-decoration: line-through;
                      margin-left: 10px;
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">￥128</span>
								</view>
								<view class="nn1">
									<span style="
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">500m</span>
								</view>
							</view>
						</view>
						<view class="rediv">
							<view class="r">
								<view>PSO</view>
								<u-badge type="warning" max="99" :value="mg"></u-badge>
							</view>
							<view class="retitlediv">
								<view class="spandiv">
									<span>PSO换电站 可租售 可贷款购买 可分期购买</span>
								</view>
							</view>
							<view class="button2div">
								<view class="nn">
									<span style="font-size: 20px; font-weight: bold; color: red">￥68
									</span>
									<span style="
                      text-decoration: line-through;
                      margin-left: 10px;
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">￥128</span>
								</view>
								<view class="nn1">
									<span style="
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">500m</span>
								</view>
							</view>
						</view>
						<view class="rediv">
							<view class="r">
								<view>PSO</view>
								<u-badge type="warning" max="99" :value="mg"></u-badge>
							</view>
							<view class="retitlediv">
								<view class="spandiv">
									<span>PSO换电站 可租售 可贷款购买 可分期购买</span>
								</view>
							</view>
							<view class="button2div">
								<view class="nn">
									<span style="font-size: 20px; font-weight: bold; color: red">￥68
									</span>
									<span style="
                      text-decoration: line-through;
                      margin-left: 10px;
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">￥128</span>
								</view>
								<view class="nn1">
									<span style="
                      font-size: 10px;
                      font-weight: 400;
                      color: rgba(102, 102, 102, 1);
                    ">500m</span>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 最后的图片区域 -->
				<view class="imagediv">
					<image src="@/static/image/7@3x.png" mode="scaleToFill" />
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<customTabbar :curr-page="0" :key="$store.state.internationalization.number" />
	</view>
</template>

<script>
	import customTabbar from "../../wxcomponents/customTabbar.vue";
	import Mypicker from "../../wxcomponents/title/Mypicker.vue";
	import {
		getUserTaxiOrder,
		cancelOrder
	} from '@/api/driver'
	export default {
		components: {
			mypicker: Mypicker,
			customTabbar,
		},
		data() {
			return {
				home: '',
				internationalization: {},
				mg: "5折",
				// 查询的关键字
				searchval: "",
				// 切换的语言
				language: "China", //China   English
				id: 0, // 使用 marker点击事件 需要填写id
				title: "map",
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
						latitude: 39.909,
						longitude: 116.39742,
						iconPath: "../../../static/location.png",
					},
					{
						latitude: 39.9,
						longitude: 116.39,
						iconPath: "../../../static/location.png",
					},
				],
				//   这个是子组件的参数
				regiPerson: "", // 选择的Item
				peopleList: [{
						id: "1",
						name: "选项一",
					},
					{
						id: "2",
						name: "选项二",
					},
					{
						id: "3",
						name: "选项三",
					},
					{
						id: "4",
						name: "选项四",
					},
					{
						id: "5",
						name: "选项五",
					},
				], // 登记人选择列表
			};
		},
		onShow: function() {
			uni.hideLoading();
			this.getlanguagedata();
			console.log("Personalcenter Show", this.internationalization.tab.home);
		},
		onLoad() {
			uni.hideLoading();
			this.getlanguagedata();
		},
		mounted() {
			uni.hideLoading();
			this.getlanguagedata();
		},

		methods: {
			getHeader() {
				this.option.header = {
					'Authorization': "Bearer " + uni.getStorageSync("token") || ""
				}
				console.log("this.option")
				console.log(this.option)
			},
			// 某文件上传结束回调(成功失败都回调)
			onuploadEnd(item) {
				console.log(`${item.name}已上传结束，上传状态=${item.type}`);

				// 更新当前窗口状态变化的文件
				this.files.set(item.name, item);

				// ---可删除--演示上传完成后取服务端数据
				if (item['responseText']) {
					console.log('演示服务器返回的字符串JSON转Object对象');
					this.files.get(item.name).responseText = JSON.parse(item.responseText);
				}

				// 微信小程序Map对象for循环不显示，所以转成普通数组，
				// 如果你用不惯Map对象，也可以像这样转普通数组，组件使用Map主要是避免反复文件去重操作
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif

				// 强制更新视图
				this.$forceUpdate();


				// ---可删除--演示判断是否所有文件均已上传成功
				let isAll = [...this.files.values()].find(item => item.type !== 'success');
				if (!isAll) {
					console.log('已全部上传完毕');
				} else {
					console.log(isAll.name + '待上传');
				}

			},
			// 上传进度回调
			onprogress(item) {
				// 更新当前状态变化的文件
				this.files.set(item.name, item);

				console.log('打印对象', JSON.stringify(this.files.get(item.name)));
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif

				// 强制更新视图
				this.$forceUpdate();

			},
			// 文件选择回调
			onChange(files) {
				console.log('当前选择的文件列表：', JSON.stringify([...files.values()]));
				// 更新选择的文件
				this.files = files;
				// 强制更新视图
				this.$forceUpdate();

				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif

				// ---可删除--演示重新定位覆盖层控件
				this.$nextTick(() => {
					console.log('演示重新定位');
					this.$refs.lsjUpload0.show();
					this.$refs.lsjUpload1.show();
					this.$refs.lsjUpload2.show();
				});

			},
			// 手动上传
			upload() {
				// name=指定文件名，不指定则上传所有type等于waiting和fail的文件
				this.$refs['lsjUpload' + this.tabIndex].upload();
			},
			// 指定上传某个文件
			resetUpload(name) {
				this.$refs['lsjUpload' + this.tabIndex].upload(name);
			},
			// 移除某个文件
			clear(name) {
				// name=指定文件名，不传name默认移除所有文件
				this.$refs['lsjUpload' + this.tabIndex].clear(name);
			},
			// 顺风车
			getFreeRide() {
				if (!uni.getStorageSync('UID')) {
					uni.showToast({
						title: this.internationalization.FreeRide.qxdl,
						icon: 'none',
						duration: 2000
					});
					return
				}
				try {
					getUserTaxiOrder({
						userId: uni.getStorageSync('UID'),
						orderType: 1
					}).then(res => {
						if (res.data && res.data.orderId) {
							// cancelOrder({
							// 	orderId: res.data.orderId,
							// 	orderStatus: 3
							// }).then(res => {
							// 	uni.navigateTo({
							// 		url: "/pages/Home/freeRide/index1",
							// 	});
							// })
							const info = res.data;
							switch (Number(info.orderStatus)) {
								case 0:
									// 未接单
									uni.navigateTo({
										url: `/pages/Home/freeRide/waitOrder?id=${info.orderId}`,
									});
									return;
								case 1:
									// 进行中
									if (Number(info.payStatus) === 1) {
										uni.navigateTo({
											url: `/pages/Home/freeRide/waitPay?id=${info.orderId}`,
										});
									} else if (Number(info.isGetOn)) {
										// 已支付	未上车
										uni.navigateTo({
											url: `/pages/Home/freeRide/waitDeparture?id=${info.orderId}&driverId=${info.driverId}`,
										});
										// uni.navigateTo({
										// 	url: `/pages/Home/freeRide/bookedSuccess?id=${info.orderId}&driverId=${info.driverId}&planEndTime=${info.planEndTime}`,
										// });
									} else {
										// 已支付	已上车
										uni.navigateTo({
											url: `/pages/Home/freeRide/onTheRoad?id=${info.orderId}&driverId=${info.driverId}`,
										});
									}
									return;
							}
						} else {
							uni.navigateTo({
								url: "/pages/Home/freeRide/index1",
							});
						}
					}).catch((err) => {
						console.log(err)
					})
				} catch (error) {
					console.log(error)
				}
			},
			goTakingataxi() {
				// uni.navigateTo({
				// 	url: "/pages/Home/Takingataxi/index",
				// });
				if (!uni.getStorageSync('UID')) {
					uni.showToast({
						title: this.internationalization.Takingataxi.qxdl,
						icon: 'none',
						duration: 2000
					});
					return
				}
				try {
					getUserTaxiOrder({
						userId: uni.getStorageSync('UID'),
						orderType: 2
					}).then(res => {
						console.log(JSON.stringify(res))
						if (res.data && res.data.orderId) {
							const info = res.data;
							switch (Number(info.orderStatus)) {
								case 0:
									// 未接单
									uni.navigateTo({
										url: `/pages/Home/Takingataxi/callDriver?id=${info.orderId}&driverId=${info.driverId}`,
									});
									return;
								case 1:
									// 进行中
									if (Number(info.payStatus) === 0) {
										uni.navigateTo({
											url: `/pages/Home/Takingataxi/onTheRoad?id=${info.orderId}&driverId=${info.driverId}`,
										});
									} else if (Number(info.isGetOn)) {
										// 	未上车
										uni.navigateTo({
											url: `/pages/Home/Takingataxi/receivedOrder?id=${info.orderId}&driverId=${info.driverId}`,
										});
									} else {
										// 已上车
										uni.navigateTo({
											url: `/pages/Home/Takingataxi/onTheRoad?id=${info.orderId}&driverId=${info.driverId}`,
										});
									}
									return;
							}
						} else {
							uni.navigateTo({
								url: "/pages/Home/Takingataxi/index",
							});
						}
					}).catch((err) => {
						console.log(err)
					})
				} catch (error) {
					console.log(error)
				}
			},
			getlanguagedata() {
				this.internationalization =
					this.$store.getters["internationalization/getinternationalization"];
				// this.home = this.internationalization.tab.home
			},
			// 登记人员选择
			personSelect(e) {
				console.log("登记人员选择", e.id);
			},

			// 处室选择
			changePicker(e) {
				console.log("deptList", this.deptList);
			},
			// 跳转订单
			MYobj() {
				uni.navigateTo({
					url: "/pages/Orderforgoods/Orderforgoods",
				});
			},
			// 扫描用车
			MyScan() {
				// uni.scanCode({
				//   onlyFromCamera: true,
				//   success: function (res) {
				//     console.log('条码类型：' + res.scanType);
				//     console.log('条码内容：' + res.result);
				//     uni.navigateTo({
				//       url: `/pages/Home/Scancode/Unblanking?result=${res.result}`,
				//     });
				//   }
				// });

				//模拟扫码
				uni.navigateTo({
					url: `/pages/Home/Scancode/Unblanking?result=123456`,
				});
			},
			// 去搜索
			Mysearch() {
				console.log(11111);
				uni.navigateTo({
					url: "/pages/Home/Searchfor",
				});
			},
			// 去换电站
			MyExchangestation() {
				uni.navigateTo({
					url: "/pages/Exchangestation/Recommend",
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.alldiv {
		width: 100%;
		height: 90vh;
		overflow: auto;
		background-color: rgba(255, 255, 255, 0.1);

		// 这个是头部样式
		.headdiv {
			width: 100%;
			height: 30%;
			overflow: hidden;

			//   这个是地图区域的样式
			.mapdiv {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 13%;
				/* 设置 mapdiv 的高度 */
				z-index: 1;
				/* 将 mapdiv 放置在上层 */
				display: flex;

				// 这个是子组件下拉框样式
				.mypickerdiv {
					width: 35%;
					height: 100%;
					font-size: 12px;
					font-weight: 400px;
					display: flex;
				}
			}
		}

		//   这个是主体区域样式
		.bodydiv {
			width: 100%;
			height: 80%;
			border-radius: 50%;
			background-color: rgba(255, 255, 255, 1);
			opacity: 1;
			border-radius: 10%;
			position: absolute;

			// 这个是按钮区域样式
			.buttondiv {
				width: 100%;
				height: 5%;
				position: relative;
				bottom: 25px;
				display: flex;
				justify-content: center;
			}

			// 这个是功能区域的样式
			.functiondiv {
				width: 90%;
				height: 10%;
				margin: auto;
				display: flex;

				.fundiv {
					width: 50%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					line-height: 16.46px;
					font-size: 12px;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
				}
			}

			// 订单区域样式
			.goodsdiv {
				width: 100%;

				.gddiv {
					left: 16px;
					top: 466px;
					width: 90%;
					height: 105px;
					opacity: 1;
					border-radius: 6px;
					background: linear-gradient(135deg,
							rgba(47, 212, 183, 0.17) 0%,
							rgba(64, 239, 136, 0.07) 100%);
					margin: auto;
					padding: 10px;

					.orderTop {
						height: 48px;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.pic {
							margin: 0 10px;
						}

						.phone {
							margin: 0 10px;
						}

						.carInfo {
							.text {
								font-weight: bold;
								color: rgba(56, 56, 56, 1);
							}

							overflow: hidden;
							flex: 1;
						}
					}

					.middle {
						padding: 20px 10px 10px 10px;
						position: relative;

						.mibProgress {
							/deep/.u-line-progress__line {
								background: linear-gradient(90deg,
										rgba(47, 212, 184, 0.2) 0%,
										rgba(47, 212, 184, 1) 100%) !important;
							}
						}

						.endTag {
							width: 22px;
							height: 22px;
							position: absolute;
							right: 0;
							text-align: center;
							background: rgba(255, 196, 0, 1);
							color: rgba(255, 255, 255, 1);
							border-radius: 50%;
							top: 15px;
						}

						.endFlagTip {
							position: absolute;
							right: 0;
							top: -15px;
							width: 120px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							background: #fff;
							padding: 1px 8px;
							border-radius: 2px;
							opacity: 0.9;
						}

						.arrow {
							position: absolute;
							right: 5px;
							top: 9px;
							width: 0;
							height: 0;
							border-left: 5px solid transparent;
							border-right: 5px solid transparent;
							border-top: 10px solid #fff;
						}
					}

					.driverInfo {
						text-align: center;

						em {
							font-weight: 700;
							font-style: unset;
							color: rgba(47, 212, 184, 1);
						}
					}
				}
			}

			// 推荐换电站
			.recommenddiv {
				width: 100%;
				height: 40%;

				// 菜单结构
				.recommdiv {
					width: 100%;
					height: 5%;
					margin-bottom: 20px;
				}

				// 推荐换电站列表样式
				.recommlistdiv {
					width: 100%;
					height: 90%;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					overflow: auto;

					// 列表中元素样式
					.rediv {
						width: 43%;
						height: 96px;
						margin-left: 10px;
						margin-top: 10px;
						box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);

						.r {
							width: 100%;
							height: 20%;
							display: flex;
							justify-content: space-between;
							font-size: 14px;
							font-weight: 400;
							overflow: hidden;
							color: rgba(56, 56, 56, 1);
						}

						.retitlediv {
							width: 100%;
							height: 30%;
							line-height: 1;
							color: rgba(153, 153, 153, 1);
							word-wrap: break-word;
							text-align: left;
							overflow: hidden;

							.spandiv {
								width: 100%;
								height: 100%;
								font-size: 10px;
								font-weight: 400;
								overflow: hidden;
							}
						}

						.button2div {
							width: 100%;
							height: 50%;
							display: flex;

							.nn {
								width: 50%;
								height: 100%;
								display: flex;
								align-items: flex-end;
							}

							.nn1 {
								width: 50%;
								height: 100%;
								display: flex;
								align-items: flex-end;
								justify-content: flex-end;
							}
						}
					}
				}
			}

			// 图片区域
			.imagediv {
				width: 100%;
				height: 30%;
				display: flex;
				justify-content: center;
				margin-top: 15px;

				image {
					width: 90%;
					height: 60%;
					max-width: 90%;
					max-height: 60%;
				}
			}
		}
	}

	/deep/ .van-search {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		box-sizing: border-box;
		padding: 10px 12px;
		width: 280px !important;
		background-color: rgba(255, 255, 255, 0.1) !important;
	}

	/deep/ .uni-input-input {
		position: relative;
		display: block;
		height: 100%;
		background: none;
		color: inherit;
		opacity: 1;
		font: inherit;
		line-height: 16.46px;
		color: rgba(56, 56, 56, 1);
		letter-spacing: inherit;
		font-size: 20px;
		font-weight: 400;
		text-align: inherit;
		text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
	}

	/deep/ .van-button--primary {
		color: #fff;
		background: linear-gradient(90deg,
				rgba(65, 240, 135, 1) 0%,
				rgba(47, 212, 184, 1) 100%);
		border: 1px solid #07c160;
		font-size: 16px;
		font-weight: 700;
	}

	/deep/ .van-cell--clickable {
		cursor: pointer;
		font-size: 14px;
		font-weight: 700;
	}

	/deep/ .van-badge {
		display: inline-block;
		box-sizing: border-box;
		min-width: 16px;
		padding: 0 3px;
		color: #fff;
		width: 50px;
		height: 18px;
		font-weight: 500;
		font-size: 10px;
		font-weight: 700;
		line-height: 10px;
		font-family: -apple-system-font, "Times New Roman", "华文中宋", sans-serif;
		line-height: 1.2;
		text-align: center;
		background: linear-gradient(135deg,
				rgba(255, 141, 26, 1) 0%,
				rgba(255, 82, 82, 1) 100%);
		border: 1px solid #fff;
		border-radius: 0px 6px 0px 6px;
	}

	/deep/ .u-badge--warning {
		display: inline-block !important;
		box-sizing: border-box !important;
		min-width: 16px !important;
		padding: 0 3px !important;
		color: #fff !important;
		width: 40px !important;
		height: 15px !important;
		font-weight: 500 !important;
		font-size: 10px !important;
		font-weight: 700 !important;
		line-height: 10px !important;
		font-family: -apple-system-font, "Times New Roman", "华文中宋", sans-serif !important;
		line-height: 1.2 !important;
		text-align: center !important;
		background: linear-gradient(135deg,
				rgba(255, 141, 26, 1) 0%,
				rgba(255, 82, 82, 1) 100%) !important;

		border-radius: 0px 6px 0px 6px !important;
	}
</style>